<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.dot {
				display: inline-block;
				width: 5px;
				height: 5px;
				background-color: #FF0000;
				vertical-align: middle;
			}

			.content {
				font-size: 14px;
				margin-left: 5px;
			}

			.item {
				width: 220px;
				height: 20px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}



			.i {
				width: 200px;
				height: 70px;
				border: #CCCCCC dashed 1px;
				margin-top: 20px;
			}

			.i div {
				height: 35px;
				line-height: 35px;
			}
		</style>
	</head>
	<body>

		<div id="container">
			<template v-for="n in newslist">
				<my-news :title="n"></my-news>
			</template>
			<hr>

			<template>
				<oo title="ss"></oo>
			</template>

			<hr>
			<template v-for="(g,index) in goodslist">
				<goods :goods="g"></goods>
			</template>
		</div>

		<script type="text/javascript">
			var news = {
				// 数组形式
				props: ["title"],
				template: `
					 <div class="item">
						<span class="dot"></span>
						<span class="content">{{title}}</span>
					</div>
				`
			}

			var oo = {
				// 对象形式
				props: {
					title: {
						type: String,
						default: "没有新闻",
						required: true
					}
				},
				template: `
					 <div class="item">
						<span class="dot"></span>
						<span class="content">{{title}}</span>
					</div>
				`
			}

			var goods = {
				props: {
					goods: {
						type: Object,
						default: function() {
							return {
								name: "无",
								price: 0
							}
						}
					}
				},
				template: `
					<div class="i">
						<div>商品名称:{{goods.name}}</div>
						<div>
							价格:￥<span style="color: #FF0000;">{{goods.price}}</span>
						</div>
					</div>
				`
			}


			var app = new Vue({
				el: "#container",
				data: {
					newslist: [
						"码上守护 阻断疫情传播  让农民安心去种地  金观平",
						'中国人奋斗坐标  内蒙古新型农牧民成“绿领”',
						'上海金山区方舱医院首批173位患者出院 奋进新征程'
					],
					goodslist: [{
							name: "华为手机",
							price: 2999
						},
						{
							name: "小米手机",
							price: 999
						}
					]
				},
				components: {
					"my-news": news,
					oo,
					goods
				}
			})
		</script>
	</body>
</html>
